<script setup>
import {nodeIconList} from 'simple-mind-map/src/svg/icons'
import iconList from "@/components/mind-map/IconsConfig.js"

const iconGroups = nodeIconList.concat(iconList)

const props = defineProps({
  visible: Boolean
})
const emits = defineEmits(['update:visible', 'setEmoji'])

const handleClose = () => {
  emits('update:visible', false)
}

const handleSelect = (key) => {
  emits('setEmoji', key)
}
</script>

<template>
  <el-drawer
      title="图标"
      :model-value="visible"
      show-close
      :append-to-body="true"
      @close="handleClose"
      :size="350"
  >
    <div
        v-for="(iconGroup, index) in iconGroups"
        :key="index"
    >
      <h4 class="emoji-title">{{ iconGroup.name }}</h4>
      <div
          class="flex justify-content-left"
          style="flex-wrap: wrap; margin-bottom: 20px;"
      >
        <el-icon
            class="emoji-icon"
            v-for="(icon, i) in iconGroup.list"
            :key="`${index}-${i}`"
            v-html="icon.icon"
            @click="handleSelect(`${iconGroup.type}_${icon.name}`)"
        ></el-icon>
      </div>
    </div>
    <template #footer>
      <div class="text-center">
        <el-button icon="Delete" type="warning" @click="handleSelect('')">删除图标</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.emoji-icon {
  font-size: 24px;
  margin-left: 20px;
  margin-bottom: 10px;
  cursor: pointer;

  &:nth-child(7n + 1) {
    margin-left: 5px;
  }
}

.emoji-title {
  line-height: 1;
  margin-bottom: 10px;
}
</style>